<template>
  <a-form
    :model="formState"
    ref="formDataRef"
    name="basic"
    :label-col="{ style: 'width:100px' }"
    :wrapper-col="{ style: 'calc(100% - 100px)' }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item label="进度描述" name="description">
      <a-input v-model:value="formState.description"></a-input>
    </a-form-item>

    <a-form-item label="上传图片" name="file" :rules="[{ required: false, message: '请上传图片!' }]">
      <CustomerUploadFile mode="/parent/" :disabled="type === 3" :canPast="false" :multiple="false" v-model:value="formState.file" valueType="1" :maxCount="1" list-type="picture-card">
        <plus-outlined></plus-outlined>
      </CustomerUploadFile>
      <span>只能上传PNG,JPG,JEPG,GIF文件</span>
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
      <a-button :loading="loading" type="primary" html-type="submit">确定</a-button>
      <a-button @click="resetHandle">取消</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { PlusOutlined } from "@ant-design/icons-vue";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: WorkOrder.ListRows;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", blo: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData, type } = toRefs(props);
const { formDataRef, formState, loading } = InitHook();
const { onFinish, onFinishFailed, resetFields, resetHandle } = OperationHook({
  formDataRef,
  formState,
  passData,
  emit,
  loading,
  type
});

const init = () => {
  if (type.value === 2) {
    formState.description = passData.value.description;
    if (passData.value.bizFileDetailReqDto) {
      formState.file = passData.value?.bizFileDetailReqDto?.url ? [passData.value.bizFileDetailReqDto.url] : [];
    }
  }
};

watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      resetFields();
      formDataRef.value.clearValidate();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
:deep(.ant-picker){
    width: 100%;
}
</style>
